<template>
  <div style="margin: 50px">
    <div>
      <el-select v-model="from"  placeholder="请选择翻译类型">
        <el-option v-for="dict in dict.type.language_variety" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <button style="margin-left: 734px">
        <a href="https://cloud.baidu.com/doc/MT/s/4kqryjku9#%E8%AF%AD%E7%A7%8D%E5%88%97%E8%A1%A8" target="_blank" title="该翻译使用百度翻译">文档</a>
      </button>
    </div>
    <div>
      <el-input type="textarea" v-model="q" placeholder="请输入需要翻译的内容" clearable style="width: 1000px"/>
    </div>
    <div>
      <el-select v-model="to"  placeholder="请选择翻译语种">
        <el-option v-for="dict in dict.type.language_variety" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
    </div>
    <div style="width:1000px; margin: 10px 812px">
      <el-button type="primary" icon="el-icon-refresh" size="large" @click="handleQuery">转换</el-button>
      <el-button icon="el-icon-delete" size="large" @click="resetQuery">重置</el-button>
    </div>
    <div style="margin-top: 50px">
      <label>
        <textarea type="textarea" style="width: 1000px;height: auto" v-model="pinyin" :disabled="true"></textarea>
      </label>
    </div>
    <div style="margin: 10px 855px;">
      <el-button icon="el-icon-copy-document" size="large" @click="copy">复制到剪切板</el-button>
    </div>
  </div>
</template>

<script>
import { baidutranslation } from "@/api/util/baidutranslation";

export default {
  name: "baidutranslation",
  dicts: ['language_variety'],
  data() {
    return {
      from: "auto",
      to: "",
      q: "",
      pinyin: ""
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      const q = this.q;
      if(q === "" || q === null){
        this.$modal.msgError("请输入需要翻译的内容！");
        return false;
      }
      const to = this.to;
      if(to === "" || to === null){
        this.$modal.msgError("请选择需要翻译的语种！");
        return false;
      }
      const query = {
        "from": this.from,
        "to": to,
        "q": q
      }
      baidutranslation(query).then(res => {
        if(res.code === 200){
          this.pinyin = res.data;
        }else{
          this.$modal.msgError(res.msg + "失败代码：" + res.data);
        }
      });
    },
    /** 重置 */
    resetQuery() {
      this.q = "";
      this.to = "";
      this.pinyin = "";
    },
    copy() {
      const that = this;
      navigator.clipboard.writeText(this.pinyin).then(function() {
        that.$modal.msgSuccess('复制成功');
      }, function(err) {
        that.$modal.msgError('无法复制文本: ', err);
      });
    }
  }
};
</script>
